<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				font: 12px tahoma, arial, Hiragino Sans GB, WenQuanYi Micro Hei, \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, sans-serif;
			}
			
			a {
				text-decoration: none;
				color: #1D94D1;
			}
			
			a:hover {
				color: #D80B8C;
			}
			
			.wd {
				width: 1000px;
				height: 97px;
				margin: 0 auto;
			}
			
			.div1 {
				width: 313px;
				height: 53px;
				float: left;
				background-image: url(img/sprite-hash-91639fdc.png);
			}
			
			.div2 {
				float: right;
				width: 455px;
				height: 28px;
				margin-top: 12.5px;
				background-image: url(img/sprite-hash-91639fdc.png);
				background-position: -317px 0;
				background-repeat: no-repeat;
			}
			
			.wd2 {
				width: 1000px;
				height: 600px;
				margin: 0 auto;
				background-image: url(img/57b4bd15bcc545b8b967d1df86589b99.jpg);
				background-repeat: no-repeat;
			}
			
			.wz {
				width: 300px;
				float: right;
				margin: 40px 30px 0 0;
				/*border: solid 1px darkblue;*/
			}
			
			.wz-1-fl {
				float: left;
				font-size: 14px;
				line-height: 16px;
				/*display: inline;*/
				font-family: "微软雅黑";
			}
			
			.wz-1-fr {
				float: right;
				font-size: 12px;
				display: inline;
				font-family: "微软雅黑";
				line-height: 16px;
			}
			
			.red {
				color: #D80B8C;
				vertical-align: bottom;
				line-height: 15px;
				font-family: "微软雅黑";
				font-size: 12px;
			}
			
			.wz-2-n {
				width: 278px;
				font-family: "\5FAE\8F6F\96C5\9ED1", Arial, tahoma, sans-serif;
				height: 18px;
				line-height: 18px;
				padding: 6px 10px;
				color: #333;
				background-color: #fff;
				border: 1px solid #b2b2b2;
				border-radius: 3px;
				outline: 0;
				/*margin-top: 15px 0;*/
			}
			
			.wz-3 {
				/*overflow: hidden;*/
				margin: 15px 0;
			}
			
			.wz-3-n {
				width: 154px;
				margin-right: 10px;
				height: 18px;
				line-height: 18px;
				padding: 6px 10px;
				color: #333;
				background-color: #fff;
				border: 1px solid #b2b2b2;
				border-radius: 3px;
				/*outline: 0;*/
			}
			
			.wz-3-nz {
				width: 88px;
				height: 34px;
				border-radius: 3px;
				text-align: center;
				border: 1px solid #d0d0d0;
				color: #999;
				background: #d0d0d0;
			}
			
			.wz-6 {
				overflow: hidden;
			}
			
			.wz-6-k-n {
				/*display: block;*/
				background-image: url(img/sprite.png);
				background-position: -46px 0;
				width: 19px;
				height: 16px;
				cursor: pointer;
				/*border: solid 1px black;*/
			}
			
			.wz-6-k-m {
				vertical-align: middle;
				font-size: 12px;
				display: inline-block;
				width: 277px;
				line-height: 1.2;
				text-align: left;
			}
			
			.wz-7-n {
				color: #f64a4a;
				text-align: left;
			}
			/*.wz-8-n {
				width: 301px;
				height: 41px;
				line-height: 41px;
				background-color: #D80B8C;
				color: white;
				font-size: 16px;
				border-radius: 3px;
				text-align: center;
				margin: 10px 0;
			}
			
			.wz-8-n:hover {
				background-color: rgba(241, 1, 128, 0.6);
			}*/
			
			.zhuce {
				float: right;
				margin: 18px 0 0;
				color: #1d94d1;
				height: 12px;
				font-size: 12px;
				text-decoration: none;
			}
			
			.mowei {
				width: 1000px;
				margin: 0 auto;
				color: #767074;
				text-align: center;
				margin-top: 40px;
			}
			
			.denglu-3 {
				width: 301px;
				height: 41px;
				font-size: 18px;
				line-height: 40px;
				color: white;
				background-color: #f10180;
				border: 1px solid #f10180;
				border-radius: 3px;
				margin-bottom: 20px;
				outline: none;
			}
			
			.denglu-3:hover {
				background-color: rgba(241, 1, 128, 0.6);
				cursor: pointer;
			}
			
			.wz-2 {
				position: relative;
				height: 50px;
			}
			
			.tishi {
				color: red;
				display: none;
			}
			
			#x {
				width: 21px;
				height: 22px;
				/*border: 1px solid darkblue;*/
				background-image: url(img/1.png);
				background-position: 0px -1px;
				background-repeat: no-repeat;
				position: absolute;
			}
			
			.xc {
				top: 6px;
				left: 270px;
			}
			
			#z {
				width: 21px;
				height: 22px;
				/*border: 1px solid darkblue;*/
				background-image: url(img/000.png);
				background-position: -3px -1px;
				background-repeat: no-repeat;
				position: absolute;
				display: none;
			}
			
			.zc {
				top: 6px;
				left: 270px;
			}
			
			.xx {
				top: 6px;
				left: 150px;
			}
		</style>
	</head>

	<body>
		<div class="wd">
			<a href="">
				<div class="div1"></div>
			</a>
			<div class="div2"></div>
		</div>

		<div class="wd2">
			<form action="" method="get" id="regForm">

				<div class="wz">
					<div class="wz-1">
						<span class="wz-1-fl">
               		            欢迎注册
               	      </span>
						<span class="wz-1-fr">
               		             已注册<a href="denglu.html" class="red">可直接登录</a>
               	       </span>
					</div>
					<div class="wz-2 wz-3">
						<input type="text" value="" placeholder="请输入手机号码" id="phone" class="wz-2-n" />
						<div class="tishi">
							手机号格式不正确
							<div id="x" class="xc">
							</div>
						</div>
						<div id="z" class="zc">
						</div>
					</div>
					<div class="wz-3 wz-2 ">
						<input type="text" value="" placeholder="请输入手机验证码" id="code" class="wz-3-n" />
						<input type="button" id="getcode" value="获取验证码" class="wz-3-nz wz-1-fr" disabled="disabled" />
						<div id="" class="tishi">
							验证码不正确
							<div id="x" class="xx">
							</div>
						</div>
						<div id="z" class="xx">
						</div>
					</div>
					<div class="wz-2 wz-3">
						<input type="password" value="" class="wz-4-mm wz-2-n" id="password" placeholder="密码由6-20位字母，数字和符号组合" />
						<div class="tishi">
							密码不正确，请输入正确的密码。
							<div id="x" class="xc">
							</div>
						</div>
						<div id="z" class="zc">
						</div>
					</div>
					<div class="wz-2 wz-3">
						<input type="password" name="" class="wz-5-mm wz-2-n" id="retpassword" placeholder="请再次输入上面密码" />
						<div class="tishi">
							密码和上面的不一样
							<div id="x" class="xc">
							</div>
						</div>
						<div id="z" class="zc">
						</div>
					</div>

					<div class="wz-6 wz-3">
						<span class="wz-6-k">
						<label class="wz-6-k-n wz-1-fl" id="aa" onclick="gou()"></label>
						<p class="wz-6-k-m wz-1-fl">我已阅读并接受<a href="">《唯品会服务条款》</a>与<a href="">《隐私条款》</a></p>
					</span>
					</div>

					<div class="wz-7">
						<span class="wz-7-n">
					接受服务条款才能注册
				    </span>
					</div>

					<div class="wz-8">

						<div class="denglu3">
							<input type="submit" value="立即注册" class="denglu-3" id="btnreg" />
						</div>

						<!--<div class="wz-8-n">
							立即注册
						</div>-->
						<a href="" b class="zhuce">
							<span>手机快速注册﹥</span>
						</a>
					</div>
				</div>
			</form>

		</div>

		<div class="mowei">
			<p>Copyright 2008-2017 vip.com，All Rights Reserved ICP证：粤 B2-20080329</p>
		</div>
		<script type="text/javascript">
			var n = 1;

			function gou() {
				n++
				if(n % 2 == 0) {

					document.getElementById("aa").style.backgroundPosition = "-23px 0"
				} else {
					document.getElementById("aa").style.backgroundPosition = "-46px 0"
				}
			}

			//提交表单时进行验证
			document.getElementById("regForm").onsubmit = function() {
				var phone = document.getElementById("phone");
				if(phone.value == "") {
					//设置错误消息的显示
					phone.parentNode.children[1].style.display = "block";
				}
				return false;
			}

			function yzphone() {
				var phone = document.getElementById("phone");
				var phonenum = parseInt(phone.value);
				var reg = /^1[3|4|5|7|8][0-9]{9}$/; //电话号第二位数为3,4,5,7,8,的手机用户
				if(reg.test(phonenum)) {
					phone.parentNode.children[1].style.display = "none";
					phone.parentNode.children[2].style.display = "block";
					phone.style.border = "solid 1px #b2b2b2"
					document.getElementById("getcode").disabled = false
				} else {
					phone.parentNode.children[1].style.display = "block";
					phone.parentNode.children[2].style.display = "none";
					phone.style.border = "solid 1px red"
				}
			}
			document.getElementById("phone").onblur = yzphone;

			function yzcode() {
				var code = document.getElementById("code");
				var phonenum = parseInt(code.value);
				var  reg = /^\d{6}$/;  //6位纯数字
				if(reg.test(phonenum)) {
					code.parentNode.children[2].style.display = "none";
					code.parentNode.children[3].style.display = "block";
					code.style.border = "solid 1px #b2b2b2"

				} else {
					code.parentNode.children[2].style.display = "block";
					code.parentNode.children[3].style.display = "none";
					code.style.border = "solid 1px red"
				}
			}
			document.getElementById("code").onblur = yzcode;

			//密码验证
			function yzmima() {
				var mm = document.getElementById("password");
				var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;//必须数字字母组合，不能纯数字或纯字母
				if(reg.test(mm.value)) {
					mm.parentNode.children[1].style.display = "none";
					mm.parentNode.children[2].style.display = "block";
					mm.style.border = "solid 1px #b2b2b2"
				} else {
					mm.parentNode.children[1].style.display = "block";
					mm.parentNode.children[2].style.display = "none";
					mm.style.border = "solid 1px red"
				}

			}
			document.getElementById("password").onblur = yzmima;

			function zyzmima() {
				var retmm = document.getElementById("retpassword");
				var mms = document.getElementById("password").value
				if (retmm.value==mms&&retmm.value!="") {
					retmm.parentNode.children[1].style.display = "none";
					retmm.parentNode.children[2].style.display = "block";
					retmm.style.border = "solid 1px #b2b2b2"
				} else{
					retmm.parentNode.children[1].style.display = "block";
					retmm.parentNode.children[2].style.display = "none";
					retmm.style.border = "solid 1px red"
				}
				
			}
			document.getElementById("retpassword").onblur = zyzmima;
		</script>
	</body>

</html>